<template>
    <div id="app">
        <div class="index-container">
            <label :for="'cb' + id">
                <div class="index-img">
                    <!-- <li class=" index-data-shop">{{imgUrl + coverImg}}</li> -->

                    <img :src="imgUrl + coverImg" alt="" :id="'cb' + id" @click="itemClickHanble(id)">


                </div>
            </label>

            <div class="index-text">
                <p>{{ name }}</p>
                <div class="index-text-img">
                    <span>{{ coin }}</span>
                    <img src="@/assets/img/monad.png" alt="">
                </div>
                <div class="index-text-last" @click="itemClickHanble(id)">
                    <router-link to="/">立即兑换</router-link>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    // data() {
    //     return {
    //         imgUrl: 'http://sc.wolfcode.cn/',
    //     }
    // },

    props: {
        name: {
            type: String,
            default: '校园文化衫'
        },
        coverImg: {
            type: String,
            default: 'http://sc.wolfcode.cn/upload/images/product_images/20201118/89621a9d-b54a-4c5b-a619-2d111acd1d7e.jpg'
        },
        id: {
            type: Number,
            default: 0
        },
        coin: {
            type: Number,
            default: 9900
        },
        link: {
            type: String,
            default: ''
        }

    },
    created() {
        // console.log(this.id);

    },
    methods: {
        itemClickHanble(id) {
            // js方法实现刷新，使跳转后在顶部，或者在生命周期使用document.documentElement.scrollTop = 0
            // location.href = '/detail?id=' + id

            this.$router.push('/detail?id=' + id)
            // console.log('/detail?id=' + id);
        }
    }
}
</script>

<style lang="less" scoped>
a {
    text-decoration: none;
}

#app {


    .index-img {
        display: flex;
        cursor: pointer;


    }

    .index-container {
        display: flex;
        width: 285px;
        padding-bottom: 32px;
        margin-bottom: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fff;
        transition: all .8s ease;

        &:hover {
            transform: translateY(-20px)
        }

        .index-text {
            p {
                padding: 32px;
            }

            .index-text-img {

                display: block;
                // padding-top: 35px;
                color: red;
                text-align: center;
                font-size: 18px;

                img {
                    padding-left: 5px;
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }

            }

            .index-text-last {
                margin: 0 auto;
                width: 120px;
                margin-top: 32px;
                text-align: center;
                line-height: 36px;
                border: 1px solid #0a328e;

                a {
                    color: #0a328e;
                }

                &:hover {
                    background-color: #0a328e;

                    a {
                        color: #fff;

                    }
                }


            }

        }
    }
}
</style>